<template>
  <div class="zong">
    <van-sidebar v-model="activeKey">
      <van-sidebar-item :title="item.name" v-for="item in categoryList" :key="item.id" @click="clickfn(item.id)" />
    </van-sidebar>
    <div class="y1">
      <img :src="banner_url" height="140px" width="95%" />
      <h5>{{ front_desc }}</h5>
    </div>
    <div class="y2">
      <van-grid :column-num="3">
        <van-grid-item :key="item.id" :icon="item.banner_url" :text="item.name" v-for="item in subCategoryList" />
      </van-grid>
    </div>
  </div>
</template>

<script>
import { catalogdata, catalogcurrent } from "@/api/fenlei";
import Vue from "vue";
import { Sidebar, SidebarItem } from "vant";
import { Grid, GridItem } from "vant";

Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Sidebar);
Vue.use(SidebarItem);
export default {
  name: "",
  data() {
    return {
      categoryList: [],
      // currentCategory: ,
      activeKey: "0",
      banner_url: [],
      front_desc: [],
      subCategoryList: [],
      iid: 1005000,
    };
  },
  created() {
    // 这里声明周期需要掉用一下，一加载页面就把数据更新到页面上
    this.shuju();
  },
  methods: {
    // 调取的是左边导航栏的数据
    async shuju() {
      let res = await catalogdata({});
      console.log(res);
      this.categoryList = res.data.categoryList;
      this.subCategoryList = res.data.currentCategory.subCategoryList;
      this.banner_url = res.data.currentCategory.banner_url;
      this.front_desc = res.data.currentCategory.front_desc;
      // this.iid = res.data.currentCategory.id;
      // console.log(this.iid);
      this.catalogcurr();
    },
    catalogcurr() {
      // 这里调取的是右边的数据
      catalogcurrent({
        id: this.iid,
      }).then((res) => {
        console.log("xia", res);
        this.subCategoryList = res.data.currentCategory.subCategoryList;
        this.banner_url = res.data.currentCategory.banner_url;
        this.front_desc = res.data.currentCategory.front_desc;
      });
    },
    clickfn(id) {
      console.log(id);
      this.iid = id;
      this.catalogcurr();
    },
  },
};
</script>
<style lang="less" scoped>
.zong {
  width: 100%;

  .van-sidebar {
    width: 20%;
    float: left;
  }

  .y1 {
    float: right;
    width: 80%;
    position: relative;

    img {
      width: 260px;
      margin-left: 16px;
      box-shadow: 0 0 6px #000;
      filter: brightness(0.5);
    }

    h5 {
      text-align: center;
      position: absolute;
      top: 45%;
      left: 22%;
      color: #fff;
    }
  }

  .y2 {
    float: right;
    width: 80%;
  }

  .ss van-tabbar__placeholder {
    float: right;
    width: 78%;
  }
}
</style>